import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { TreeSelect, Tree } from 'antd';
import { postAxios } from '../api/axios'
import { API_GetChildStruc } from '../API'
import store from '../store/index'
import { actionT} from '../store/actionTypes'
const { TreeNode } = Tree;
class Usertree extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nowSelectName: '',
            treeData: [],
        }
    }

    
    onLoadData = treeNode =>{
        let self=this;
        return new Promise(resolve => {
            const { id } = treeNode.props;
            // setTimeout(() => {
            //   this.setState({
            //     treeData: this.state.treeData.concat([
            //       this.genTreeNode(id, false),
            //       this.genTreeNode(id, true),
            //     ]),
            //   });
            //   resolve();
            // }, 300);
           let userId=treeNode.props.eventKey
            let data=self.getTreeNode(userId)
            data.then(res=>{
                resolve();
                console.log('res',res)
                treeNode.props.dataRef.children =res
                self.setState({
                        treeData: [...self.state.treeData],
                    });
            })
          });
    }
        
        // console.log('treeNode',treeNode.props.eventKey)
        // // new Promise(resolve => {
        // //     const { id } = treeNode.props;
        // //     setTimeout(() => {
        // //         this.setState({
        // //             treeData: this.state.treeData.concat([
        // //                 this.getTreeNode(id, false),
        // //                 this.getTreeNode(id, true),
        // //             ]),
        // //         });
        // //         resolve();
        // //     }, 300);
        // // });
        // let userId=treeNode.props.eventKey
        // let data=this.getTreeNode(userId)
        // data.then(res=>{
        //     console.log('res',res)
        // })
        
    
        
    renderTreeNodes = data =>{
        console.log('data',data)
        let treeNode=[]
        data.map(item => {
            if (item.children) {
                treeNode.push(
                  <TreeNode title={item.name} value={item.name} key={item.userId} dataRef={item} isLeaf={!item.hasChild} >
                    {this.renderTreeNodes(item.children)}
                  </TreeNode>
                );
              }else{
                treeNode.push(<TreeNode title={item.name} value={item.name} key={item.userId} dataRef={item} isLeaf={!item.hasChild} />)
              }
            
        });
        return treeNode
    }
    onSelect = (value,node,extra) => {
        // console.log('nowSelectName',value);
        // console.log('node',node.props.dataRef.userId);
        // console.log('extra',extra);
        this.setState({nowSelectName:value });
        const action ={
            type:actionT.setNowSelectUserId,
            value:node.props.dataRef.userId
        }
        store.dispatch(action)  //传递action
    }; 
    render() {
        return (

            <TreeSelect
                // treeDataSimpleMode
                style={{ width: '100%' }}
                value={this.state.nowSelectName}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                loadData={this.onLoadData}
                placeholder="选择用户"
                // treeDefaultExpandAll
                onSelect={this.onSelect}
                // treeData={this.state.treeData}
            >{this.renderTreeNodes(this.state.treeData)}</TreeSelect>

        );
    }
    componentDidMount() {
        let data=this.getTreeNode()
        let self=this;
        data.then(function(res){
            console.log('res',res)
            self.setState({
                nowSelectName: res[0].name,
                treeData: res
            })
            // console.log('treeData',this.state.treeData)
        })
    }
    // 获取树数据
    getTreeNode(userId){
        return new Promise((resolve,reject)=>{
            let param={}
            if(userId){
                param.targetUserId=userId
            }
            postAxios(API_GetChildStruc,param).then((res) => {
                console.log('响应的数据',res)
                if (res.data) {
                    if(!userId){
                        const action ={
                            type:actionT.setNowSelectUserId,
                            value:res.data[0].userId
                        }
                        store.dispatch(action)  //传递action
                    }
                    resolve(res.data);
                }
            }, (error) => {
                console.log(error)
                reject(error);
            })
        })
        
    }
}
export default Usertree;